<template>
  <div id="Enrich" class="mainpage">
    <!-- 面包导航开始 -->
    <el-row style="margin: 15px">
      <div class="breadcrumb">
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="14">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item
              :to="{ path: item.path }"
              v-for="(item, j) in paths"
              :key="j"
              >{{ item.hit }}</el-breadcrumb-item
            >
          </el-breadcrumb>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
          <div class="grid-content unseealbe-content"></div>
        </el-col>
      </div>
    </el-row>
    <!-- 面包导航结束 -->
    <!-- 内容主体 -->
    <el-row :gutter="10">
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
      <el-col
        :xs="24"
        :sm="22"
        :md="20"
        :lg="18"
        :xl="14"
        style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)"
      >
        <!-- 在此嵌入组件 -->
        <el-dialog title="CandidateList" :visible.sync="dialogTableVisible">
          <el-table :data="gridData">
            <el-table-column
              property="value"
              label="Match name"
              width="250"
            ></el-table-column>
            <!-- <el-table-column
              property="score"
              label="Score"
              width="250"
            ></el-table-column> -->
            <!-- <el-table-column
              property="HMDB"
              label="HMDB"
              width="150"
            ></el-table-column>
            <el-table-column
              property="Pubchem"
              label="Pubchem"
              width="150"
            ></el-table-column>
            <el-table-column
              property="KEGG"
              label="KEGG"
              width="150"
            ></el-table-column> -->
            <el-table-column align="right">
              <template slot="header"> </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="selectCandidate(scope.$index, scope.row)"
                  >Select</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-dialog>
        <el-row :gutter="10">
          <el-col :span="22" :offset="1">
            <!-- 说明文字开始 -->
            <el-row :gutter="10" style="margin: 20px">
              <span
                class="demonstration"
                style="
                  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC',
                    'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial,
                    sans-serif;
                  font-size: 18px;
                  font-color: blue;
                "
                >请阅读所需分析的数据</span
              >
            </el-row>
            <!-- 说明文字结束 -->
            <!-- 表格开始 -->
            <template>
              <el-row>
                <el-table
                  border
                  :data="tableData"
                  style="width: 100%; margin: 10px"
                >
                  <el-table-column label="Query" prop="Query">
                  </el-table-column>
                  <el-table-column label="Hit" prop="Match"> </el-table-column>
                  <el-table-column label="Kegg" prop="KEGG"> </el-table-column>
                  <el-table-column label="HMDB" prop="HMDB"> </el-table-column>
                  <el-table-column label="PubChem" prop="PubChem">
                  </el-table-column>
                  <el-table-column label="SMILES" prop="SMILES">
                  </el-table-column>
                  <el-table-column align="right">
                    <template slot="header"> </template>
                    <template slot-scope="scope">
                      <el-button
                        @click="handleEdit(scope.$index, scope.row)"
                        v-if="scope.row.Comment == 0"
                        type="text"
                      >
                        View</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </el-row>
            </template>
            <!-- 表格结束 -->
            <el-row>
              <el-col :xs="11" :sm="11" :md="11" :lg="11" :xl="11">
                <div class="grid-content unseealbe-content"></div>
              </el-col>
              <el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2">
                <el-button plain style="margin: 10px" @click="nextPage">提交</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <!-- 嵌入组件结束 -->
      </el-col>
      <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="5">
        <div class="grid-content unseealbe-content"></div>
      </el-col>
    </el-row>
    <!-- 内容主体结束 -->
  </div>
</template>

<script>
import algo from "@/api/algo";
export default {
  data() {
    return {
      candidate:"",
      tableData: [],
      search: "",
      paths: [
        { path: "/", hit: "首页" },
        { path: "/algo", hit: "分析算法" },
        { path: "/algo/enrich-normal/enrich-input", hit: "富集分析输入" },
        { path: "/algo/enrich-normal/enrich-list", hit: "富集分析输入列表" },
      ],
      gridData: [
      
      ],
      dialogTableVisible: false,
      cmd:""
    };
  },
  created() {
    algo.GetSessionData().then((response) => {
      this.tableData = response.data.data.map.enrichCreateTable;
    });
  },
  methods: {
    handleEdit(index, row) {
      this.candidate = row.Query;
      let cmd = `mSet<-PerformDetailMatch(mSet, "${row.Query}");\nmSet<-GetCandidateList(mSet);`;
      algo.GetCandidateList(cmd).then((response) => {
        this.gridData = response.data.data.CandidateList;
        console.log(this.gridData);
      });
      this.dialogTableVisible = true;
    },
    selectCandidate(index, row) {
      let cmd = `mSet<-SetCandidate(mSet, "${this.candidate}", "${row.value}");`;
      algo.SetCandidate(cmd).then((response) => {
        this.tableData = response.data.data.Table;
      });
      this.dialogTableVisible = false;
    },
    nextPage(){
      this.$router.push({name:'algo-enrich-parameter'})
    }
  },
};
</script>

<style>
.el-col {
  border-radius: 4px;
}

.el-row {
  min-height: 30px;
}

.unseealbe-content {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 10px;
}

.mainpage {
  margin-bottom: 0px;
  min-height: 800px;
}
</style>